<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!--/*@thymesVar id="title" type="templates"*/-->
    <title th:text="${title}">默认的标题</title>
    <link rel="stylesheet" th:href="@{/static/layui/js/css/layui.css}">
    <script th:src="@{/static/layui/js/layui.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/vue.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/axios.min.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/jquery/jquery.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/echart/echarts.js}" charset="UTF-8" type="text/javascript"></script>
    <style>
        .layui-bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <ul class="layui-nav layui-header" lay-bar="disabled" >
        <li class="layui-nav-item layui-nav-itemed ">
            <span>
                <span class="layui-font-20" >
                    访客信息管理平台
                </span>
                <span class="layui-hide-xs"></span>

            </span>

        </li>
        <li class="layui-nav-item layui-layout-right " style="margin-right: 80px">
           <span class="layui-circle layui-badge-rim " >
                <i class="layui-icon layui-icon-username " style="margin-right: 13px"></i>
                 <span class="layui-badge-dot layui-bg-green" style="margin-left: -12px"></span>
            </span>

            <span th:inline="text">管理员ID：[[${stp.getLoginId()}]]</span>



            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd>
                    <a th:href="@{/admin/logout}">
                        <i class=" layui-icon layui-icon-logout"></i>
                        退出登录
                    </a>
                </dd>
            </dl>
        </li>

    </ul>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item ">
                    <a class="layui-icon layui-icon-auz" th:href="@{/admin/index/authorize}">授权管理</a>

                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="layui-icon layui-icon-console" th:href="@{/admin/index/supervision}">访问监管</a>
                </li>
                <li class="layui-nav-item">
                    <a class="layui-icon layui-icon-set-fill" th:href="@{/admin/index/mng}">管理员信息管理</a>
                </li>

            </ul>
        </div>
    </div>


<!--右侧业务界面-->
    <div class="layui-body" >
        <div  class="layui-nav layui-bg-green">
            <ul  >
                <li class="layui-nav-item ">
                    <a class="layui-icon layui-icon-log"  th:href="@{/admin/index/supervision/log}">访问记录</a>

                </li>
                <li class="layui-nav-item ">
                    <a class="layui-icon layui-icon-log layui-icon-password"  th:href="@{/admin/index/supervision/control}">访问控制</a>

                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a class="layui-icon layui-icon-website" th:href="@{/admin/index/supervision/float}">流量监控</a>
                </li>
            </ul>
        </div>


        <!--选项卡-->
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">网站请求量统计</li>
                <li>授权用户访问量统计</li>
                <li>流量控制</li>
            </ul>

            <!--容器卡片-->


            <div class="layui-tab-content" >
                <!--卡片1网站请求量统计 -->
                <div class="layui-tab-item layui-show" id="requestTrace">

                    <button class="layui-btn" id="optionMenu" style="margin-left: 20px">
                        筛选条件
                        <i class="layui-icon layui-icon-down layui-font-12"></i>
                    </button>
                    <button class="layui-btn layui-btn-disabled" style="margin-left: 35%">请求量总计：{{total}}次</button>

                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div class="layui-panel" style="width: 900px;height:500px; margin-left: 15%;margin-top: 10px;text-align: center" id="chart">
                        <div class="layui-btn-disabled" style="margin-top: 30px">
                            无数据，请尝试重新设置筛选条件
                        </div>

                    </div>


                </div>
                <!--卡片2授权用户访问量统计 -->
                <div class="layui-tab-item" >
                    <div class="layui-tab-item layui-show" id="visitTrace">

                        <button class="layui-btn" id="optionMenu2" style="margin-left: 20px">
                            筛选条件
                            <i class="layui-icon layui-icon-down layui-font-12"></i>
                        </button>
                        <button class="layui-btn layui-btn-disabled" style="margin-left: 35%">请求量总计：{{total}}次</button>

                        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                        <div class="layui-panel" style="width: 900px;height:500px; margin-left: 15%;margin-top: 10px;text-align: center" id="chart2">
                            <div class="layui-btn-disabled" style="margin-top: 30px">
                                无数据，请尝试重新设置筛选条件
                            </div>

                        </div>


                    </div>



                </div>

                <!--卡片3流量控制 -->
                <div class="layui-tab-item" id="floatControl">
                    <div class="layui-panel" style="width: 900px;height:500px; margin-left: 15%;margin-top: 10px;text-align: center" >
                        <div class="layui-row layui-col-space10" style="margin-top: 3%">
                            <div class="layui-col-md4">

                            </div>
                            <div class="layui-col-md4">
                                <div class="layui-font-18 layui-bold">
                                    Sentinel专业流量控制中心
                                </div>
                                <div class="layui-font-16 layui-bold" style="margin-top: 6%">
                                    您可以跳转到Sentinel流量控制台对网站流量进行控制
                                </div>


                            </div>
                            <div class="layui-col-md4">

                            </div>
                        </div>
                        <!--sentinel账号密码输入框-->
                        <form  class="layui-form layui-form-pane"  style="margin-top: 30px;margin-left: 10%" lay-filter="addForm" id="toSentinel">
                            <div id="setServiceHost" class="layui-form-item" data-index="4" data-tag="input" style="width:86%" >
                                <label class="layui-form-label" id="service_host_label">
                                    <font color="red">*</font>主机:</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model:value="hostname" class="layui-input" value="" placeholder="主机名,比如sentinel.com">
                                </div>
                            </div>

                            <div id="setServicePort" class="layui-form-item" data-index="4" data-tag="input" style="width:86%" >
                                <label class="layui-form-label" id="service_port_label">
                                    <font color="red">*</font>端口号：</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model:value="port" class="layui-input" value="" placeholder="sentinel服务对应的端口号">
                                </div>
                            </div>


                            <div class=" layui-form-item layui-input-block " style="margin-right: 30%">
                                <div class="layui-btn-container " >
                                    <button class="layui-btn layui-btn-primary" type="button" id="redirectCancel">
                                        清空
                                    </button>
                                    <button class="layui-btn lay-submit"  type="button" @click="redirect">
                                        跳转
                                    </button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>







<!--请求统计数据源-->

<!--所有请求记录统计数据源-->
<!--get方法-->
<form th:action="@{/admin/index/supervision/float/request/all}" id="dataSourceRequestAll" ></form>

<!--近一周请求记录统计-->
<!--get方法-->
<form th:action="@{/admin/index/supervision/float/request/week}" id="dataSourceRequestWeek"></form>

<!--近一个月请求记录统计-->
<!--get方法-->
<form th:action="@{/admin/index/supervision/float/request/month}" id="dataSourceRequestMonth"></form>

<!--指定日期范围的请求记录统计-->
<!--post方法-->
<form th:action="@{/admin/index/supervision/float/request/daterange}" id="dataSourceRequestDateRange"></form>

<!--请求统计日期填写弹出层-->
<div id="openRequestDateTraceProductBox" style="display: none; padding: 10px;">
    <form class="layui-form layui-form-pane" action="" lay-filter="requestDateTrace" pane style="margin-left: 30px;margin-top: 10px" >
        <div id="requestDateTrace">
            <div class="layui-form-item" id="requestDateRange">
                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label">起始时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="requestStartDate" class="layui-input" placeholder="起始日期">
                    </div>

                </div>

                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label" >结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="requestEndDate" class="layui-input" placeholder="结束日期">
                    </div>

                </div>
            </div>
            <div class=" layui-form-item layui-input-block " >
                <div class="layui-btn-container " >
                    <button class="layui-btn layui-btn-primary" type="button" id="requestDateCancel">
                        取消
                    </button>
                    <button class="layui-btn lay-submit"  type="button"  @click="requestDateSubmit">
                        提交
                    </button>
                </div>

            </div>
        </div>

    </form>
</div>


<!--授权用户访问量统计数据源-->
<!--get方法-->
<form th:action="@{/admin/index/supervision/float/visit/all}" id="dataSourceVisitAll" ></form>

<!--近一周访问记录统计-->
<!--get方法-->
<form th:action="@{/admin/index/supervision/float/visit/week}" id="dataSourceVisitWeek"></form>

<!--近一个月访问记录统计-->
<!--get方法-->
<form th:action="@{/admin/index/supervision/float/visit/month}" id="dataSourceVisitMonth"></form>

<!--指定日期范围的访问记录统计-->
<!--post方法-->
<form th:action="@{/admin/index/supervision/float/visit/daterange}" id="dataSourceVisitDateRange"></form>

<!--访问统计日期填写弹出层-->
<div id="openVisitDateTraceProductBox" style="display: none; padding: 10px;">
    <form class="layui-form layui-form-pane" action="" lay-filter="visitDateTrace" pane style="margin-left: 30px;margin-top: 10px" >
        <div id="visitDateTrace">
            <div class="layui-form-item" id="visitDateRange">
                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label">起始时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="visitStartDate" class="layui-input" placeholder="起始日期">
                    </div>

                </div>

                <div class="layui-form-item"  style="width:86%">
                    <label class="layui-form-label" >结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" id="visitEndDate" class="layui-input" placeholder="结束日期">
                    </div>

                </div>
            </div>
            <div class=" layui-form-item layui-input-block " >
                <div class="layui-btn-container " >
                    <button class="layui-btn layui-btn-primary" type="button" id="visitDateCancel">
                        取消
                    </button>
                    <button class="layui-btn lay-submit"  type="button"  @click="visitDateSubmit">
                        提交
                    </button>
                </div>

            </div>
        </div>

    </form>
</div>






<!--引入外部脚本文件-->
<script type="text/javascript" th:src="@{/static/pageStrape2_3.js}"></script>

</body>


</html>